<template>
   <div class="loginbox">
        <!-- <h2>Login - Login </h2>
        <el-button type="primary">primary</el-button>
        <el-button type="success">success</el-button> -->
     <header>
        <div class="bg">
            <canvas id="display"></canvas>
            <div id="blachole"></div>
        </div>
       <div class="formbox">
             <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane name="login">
                     <span slot="label"><i class="el-icon-user"></i> 登录</span>
                     
                  <Signin/>
                </el-tab-pane>
                <el-tab-pane  name="register">
                    <span slot="label"><i class="el-icon-pie-chart"></i> 注册</span>
                  <Register @changeactive="getNewActive"/>
                </el-tab-pane>
                <el-tab-pane  name="forgot">
                    <span slot="label"><i class="el-icon-question"></i> 忘记密码</span>
                   <Forgot/>
                </el-tab-pane>
           
            </el-tabs>
        </div>


    </header>
      
      
    </div>
</template>

<script>


import Signin from '@/components/Signin.vue'
import Register from '@/components/Register.vue'
import Forgot from '@/components/Forgot.vue'


export default {
    data(){
        return {
            activeName:'login'
        }
    },
    components:{
        Signin,
        Register,
        Forgot,
        
     
  
    },
    methods:{
        handleClick(){

        },
         getNewActive(active){
            this.activeName = active;
        }
    }
}
</script>

<style lang="scss"  scoped>


::v-deep .el-tabs__nav{
    width:100%;
    display: flex;
}
::v-deep .el-tabs__item{
    flex:1;
    text-align:center;
}
::v-deep .el-tabs__content{
    padding:20px;
}

.loginbox{
    width:100%;
    height:100%;
    background-image: url("http://browser9.qhimg.com/bdm/1000_618_80/t0153f7a6e7558f8414.jpg") ;
    background-size: 120% 100%; 
    background-repeat: no-repeat;
    background-position: 0 0;
    overflow: hidden;
    position: relative;
    animation: move 20s linear infinite;
    -webkit-animation: move 20s linear infinite;
}

@keyframes move {
    0% {
        background-position: -100px 0; 
    }
    50%{
        background-position: 0 0;
    }
    100%{
        background-position: -100px 0; 
    }
}

.formbox{
    width:430px;
    height:400px;
    position: absolute;
    top:0;
    left:55%;
    right:0;
    bottom:0;
    margin:auto;
    background: #fff;
    border-radius:10px;
    border:1px solid darkkhaki;
    background: rgba(255,255,255,.9);
}
</style>

